<script setup lang="ts">
import Card from "@/components/Card/index.vue";
import { textValue } from "@/utils/index";
import blank from "@/static/images/blank.png";
import { cloneDeep } from "lodash-es";
import addIcon from "@/static/images/addIcon.png";
import Picker from "@/components/Picker/index.vue";

const uiConfig = {
	labelSpan: 7,
	valueSpan: 17,
};

const props = defineProps<{
	showTitle?: boolean;
	value;
}>();
const emits = defineEmits(["update:value"]);

const showPicker = ref(false);
const pickerColumns = ref([
	{
		label: "DFM-LAX",
		value: "DFM-LAX",
	},
]);

const handleChangeNumber = (value: number, index: number, key: string) => {
	if (value < 0) {
		return;
	}
	const oldVal = cloneDeep(props.value);
	const _current = oldVal[index];
	_current[key] = value;

	emits("update:value", oldVal);
};

const selectAllNumber = (value: number, index: number, key: string) => {
	if (!value || value === 0) {
		return;
	}
	handleChangeNumber(value, index, key);
};

// 修改运输网络picker
const handleChangeRoute = (value, index) => {
	if (value < 0) {
		return;
	}
	const oldVal = cloneDeep(props.value);
	const _current = oldVal[index];
	_current.transportationRoute = value;

	emits("update:value", oldVal);
};

// 删除
const handleDelete = (index) => {
	const _d = cloneDeep(props.value);
	_d.splice(index, 1);
	emits("update:value", _d);
};
// 添加
const handleAdd = () => {
	const oldVal = cloneDeep(props.value);
	oldVal.push({
		transportationRoute: null,
		packageNumber: 100,
		qjNumber: 0,
		allqjNumber: 22,
		itemType: "add",
	});

	emits("update:value", oldVal);
};

const isPickerOpened = ref(false);
// 监听picker是否开启
const listenPickerOpened = (val) => (isPickerOpened.value = val);
</script>

<template>
	<Card class="storage-card-container">
		<template v-if="props.showTitle">
			<view class="title"
				>货物信息
				<view class="right" @click="handleAdd">
					<wd-img :src="addIcon" class="icon" />
				</view>
			</view>
		</template>

		<template v-if="props.value.length > 0">
			<view
				class="storage-list-item"
				v-for="(item, index) in props.value"
				:key="item.mainOrderNumber"
			>
				<wd-swipe-action
					:class="`wd-swipe-action ${isPickerOpened && 'wd-swiper-action_disabled'}`"
				>
					<template #left>
						<view class="action-delete" @click="() => handleDelete(index)">
							删除
						</view>
					</template>
					<wd-row class="row">
						<wd-col :span="uiConfig.labelSpan">运输路线</wd-col>
						<template v-if="!item.itemType">
							<wd-col class="ellipsis-1" :span="uiConfig.valueSpan">{{
								textValue(item.transportationRoute)
							}}</wd-col>
						</template>
						<template v-else-if="item.itemType === 'add'">
							<wd-col class="ellipsis-1" :span="uiConfig.valueSpan">
								<Picker
									:columns="pickerColumns"
									:modelValue="props.value?.transportationRoute"
									@update:modelValue="(v) => handleChangeRoute(v, index)"
									@open="listenPickerOpened"
									:delay="true"
								/>
							</wd-col>
						</template>
					</wd-row>
					<wd-row class="row">
						<wd-col :span="uiConfig.labelSpan">包装数量</wd-col>
						<wd-col class="ellipsis-1" :span="uiConfig.valueSpan">{{
							textValue(item.packageNumber)
						}}</wd-col>
					</wd-row>
					<wd-row class="row">
						<wd-col :span="uiConfig.labelSpan">缺件数量</wd-col>
						<wd-col :span="uiConfig.valueSpan">
							<wd-input-number
								:modelValue="item.qjNumber"
								@update:modelValue="
									(v) => handleChangeNumber(v, index, 'qjNumber')
								"
								:min="0"
							/>
							<wd-button
								class="all-btn"
								type="primary"
								size="small"
								:round="false"
								@click="() => selectAllNumber(item.qjNumber, index, 'qjNumber')"
								>选择全部</wd-button
							>
						</wd-col>
					</wd-row>
				</wd-swipe-action>
			</view>
		</template>
		<template v-else>
			<view class="blank">
				<wd-img :src="blank" class="blank-img" />
				<view class="text">暂无数据</view>
			</view>
		</template>
	</Card>
</template>

<style lang="less" scoped>
@import url("../style/card.less");
@import url("../style/row.less");
@import url("../style/form.less");

.mb-30 {
	margin-bottom: 0px !important;
}

.storage-list-item {
	padding-top: 40px;
	position: relative;

	&:not(:last-child) {
		border-bottom: 1px solid rgba(0, 0, 0, 0.35);
	}
}

.action-delete {
	width: 200px;
	height: 100%;
	background-color: red;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 40px;
	font-weight: 500;
	color: #fff;
}

.blank {
	width: 80%;
	height: 500px;
	margin: 10px auto;
	padding-bottom: 50px;

	.blank-img {
		width: 100%;
		height: 100%;
	}

	.text {
		text-align: center;
		font-size: 35px;
		color: rgba(0, 0, 0, 0.45);
	}
}

.picker {
	position: absolute;
	width: 70%;
	left: 28%;
	top: 28px;
	z-index: 10;
}

.wd-swiper-action_disabled {
	:deep(.wd-swipe-action__wrapper) {
		transform: unset !important;
	}
}
</style>
